<template>
	<view class="container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center" >
		<view style="width: 100%; height: 90rpx;  background-color: white;">
			<tn-tabs :list="list" :current="currentIndex" name="title" @change="changeTab" :isScroll="true"></tn-tabs>
		</view>
		<view style="width: 100%; height: 80vh;" class="tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
			<image :src="list[currentIndex]['img']" style="width: 80%;" class="tn-flex-2" mode="aspectFit">
			</image>
			<view class="tn-flex-1 tn-text-xxl" style="color: red;"> {{ list[currentIndex]['intro']}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				list: [{
						'title': '30x30活动便签',
						'img': "http://127.0.0.1:8080/ys/image/20240618112045174_43.jpg"
					},
					{
						'title': '其他定制',
						'img': "https://gips3.baidu.com/it/u=1821127123,1149655687&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280"
					}
				]
			};
		},
		onLoad() {
			this.loadData()
		},
		onShow() {
			let userInfo = uni.getStorageSync('userInfo');
			this.userInfo = userInfo;
			this.loadData();
		},
		watch: {
			//显示空白页
			cartList(e) {
				let empty = e.length === 0 ? true : false;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		},
		computed: {},
		methods: {
			//请求数据
			async loadData() {
				let _this = this;
				this.$Net.req({
					url: this.$API.fetchCustorInfos(),
					method: "get",
					data: {},
					dataType: 'json',
					success: function(result, status) {
						_this.list = result;
					},
				});
			},
			changeTab(index) {
				this.currentIndex = index;
				console.log('更新->', this.currentIndex);
			},
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
	}
</style>